import Vue from "vue";
import store from "@/store";

/**
 * directive自定义指令的方法
 * 第一个参数是指令
 * 第二个参数是实现方法
 * 该指令用于判断是否含有指定角色
 */
Vue.directive("hasRole", {
  inserted(el, binding) {
    // 获取自定义指令传递过来的数据
    const { value } = binding;
    // 获取vuex中的角色信息
    const roles = store.state.roles;
    // 定义创建管理员可以查看所有
    const admin = "SUPER_ADMIN";
    // 判断指令是否传值 传递的值是否是一个数组 数组是否大于0
    if (value && value instanceof Array && value.length > 0) {
      /**
       * some方法用于检测数组中的元素是否满足指定的条件
       * 并不会改变原数组，返回true或false
       */
      const hasRole = roles.some((item) => {
        /**
         * includes方法用于判断字符串是否包含某个指定的子字符串
         * 判断当前role是否为超级管理员或指定的角色
         */
        return item.code === admin || value.includes(item.code);
      });
      // 如果没有该角色
      if (!hasRole) {
        // 删除对应元素
        el.parentNode.removeChild(el);
      }
    } else {
      throw new Error(`请设置${value}对应的角色标签`);
    }
  },
});

/**
 * 自定义权限指令
 */
Vue.directive("hasPermi", {
  inserted(el, binding) {
    // 获取自定义指令传递过来的数据
    const { value } = binding;
    // 获取vuex中的权限信息
    const permissions = store.state.permissions;
    // 获取vuex中的角色信息
    const roles = store.state.roles;
    // 定义创建管理员可以查看所有
    const admin = "SUPER_ADMIN";
    // 判断值是否存在 传递的值是否是一个数组 数组是否大于0
    if (value && value instanceof Array && value.length > 0) {
      const hasPermi = permissions.some((item) => {
        // 判断当前用户是否包含指定的权限
        return value.includes(item.code);
      });
      const hasRole = roles.some((item) => {
        // 判断当前用户是否为超级管理员
        return item.code === admin;
      });
      if (!hasPermi && !hasRole) {
        // 当没有对应权限以及非超级管理员时，删除元素
        el.parentNode.removeChild(el);
      }
    } else {
      throw new Error(`请设置${value}对应的权限标签`);
    }
  },
});
